<link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css"/>
<link rel="stylesheet" href="css/lonix/lonix.float.css"/>
<style>
    .contains-panel .payInfo-list {
        width: 398px;
        height: 302px;
        border: 1px solid #c5c5c5;
        border-radius: 5px;
        display: inline-block;
        margin: 10px;
    }

    .contains-panel .payInfo-list.appear01 {
        background: #f5f5f5;
    }

    .contains-panel .payInfo-list.appear02 {
        background: #ebffe9;
    }

    .contains-panel .payInfo-list.appear03 {
        background: #ffd6d6;
    }

    .contains-panel .pay-info {
        display: inline-block;
        width: calc(100% - 260px);
        float:left;
    }

    .contains-panel .pay-info ul li {
        float: left;
        width: 100%;
        text-align: center;
        /*height: 60px;*/
        border-bottom: 1px solid #c5c5c5;
        border-left: 1px solid #c5c5c5;
    }

    .contains-panel .pay-info ul li p {
        line-height: 24px;
    }
    .contains-panel .pay-info ul li p.p1 {
        font-weight:600;
    }

    .contains-panel .pay-info ul li:last-child {
        border-bottom: none;
    }

    .contains-panel .payBtn {
        width: 100%;
        height: 34px;
        line-height: 34px;
        border-top: 1px solid #c5c5c5;
        color: #fff;
        cursor: pointer;
        border: none;
        border-radius: 0 0 5px 5px;
    }

    .contains-panel .pay-car {
        display: inline-block;
        margin: 7px;
        float:left;
        width:240px;
        height:240px;
        overflow:hidden;
    }
    .contains-panel .pay-car img{
        border:none;
    }

    .contains-panel .payBtn.btnBg01 {
        background: #27a9e3
    }

    .contains-panel .payBtn.btnBg02 {
        background: #999
    }

    .contains-panel .payInfo-box {
        width: 100%;
        height: calc(100% - 34px)
    }
</style>

<section class="contains-panel" id="center_payment" style="height:100%; width:100%;">
    <div class="search-panel">
        <div class="search-text">
            <label>车场组织：</label>
            <input type="text" class="lonix click_float_parent k-textbox" data-bind="value:orgName" readonly
                   id="organization_text4"/>
            <input type="hidden" data-bind="value:orgCode"/>
            <input type="hidden" data-bind="value:orgGpc"/>
            <div class="lonix float-frame float" id="organization-tree4">
                <div class="lonix float-header">
                    <input type="text" class="lonix search-input" maxlength="15" placeholder="搜索"/>
                </div>
                <div class="lonix float-body">
                    <ul class="ztree" id="info-tree"></ul>
                </div>
                <div class="lonix float-prompt"></div>
                <div class="lonix float-footer">
                    <div class="lonix button-group">
                        <button class="lonix button cancel">清空</button>
                        <button class="lonix button primary">确认</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="search-text">
            <label>车牌号：</label>
            <input class="k-textbox"
                   data-bind="value:voucherNo" validationMessage="规则名不能包含特殊字符"
                   pattern="^[\u4e00-\u9fa5A-Za-z0-9-_]*$"/>
        </div>
        <div class="search-text">
            <label>入场时间：</label>
            <input type="text" bdDataTimePicker=" " data-bind="value:beginTime" style="width:200px"/>
            -
            <input type="text" bdDataTimePicker=" " data-bind="value:endTime" style="width:200px"/>
        </div>
        <div class="search-Btn">
            <button data-bind="click:search_btn">查询</button>
            <button data-bind="click:reset_btn">重置</button>
        </div>
    </div>
    <div class="dataList" style=" height: calc(100% - 72px);width:100%">
        <div style="overflow-y:auto;overflow-x:hidden;height:calc(100% - 32px)">
            <div id="listView" style="border:none">

            </div>
        </div>
        <div id="pager" class="k-pager-wrap" style="height:30px;width:100%;"></div>
    </div>
    <script type="text/x-kendo-template" id="template">
        #if(isPay == 0){#
        <div class="payInfo-list appear01">
            <div class="payInfo-box">
                <div class="pay-car"><img width="100%" height="100%" src="#:imgServerUrl+'/'+imgUrl#" class="imgcircle"/></div>
                <div class="pay-info">
                    <ul>
                        <li>
                            <p class="p1">车牌号</p>
                            <p>#:vehicleNo#</p>
                        </li>
                        <li>
                            <p class="p1">所属区域</p>
                            <p style="width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" title="#:parInName#">#:parInName#</p>
                        </li>
                        <li>
                            <p class="p1">入场通道</p>
                            <p style="width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" title="#:chnInName#">#:chnInName#</p>
                        </li>
                        <li>
                            <p class="p1">入场时间</p>
                            <p>#:inTime#</p>
                        </li>
                        <li>
                            <p class="p1">停留时间</p>
                            <p>#:stopTimeDay#</p>
                            <p>#:stopTime#</p>
                        </li>
                    </ul>
                </div>
            </div>
            <button class="payBtn btnBg01" onclick="centerPayment.openCenterChargePage('#:id#','#:isPay#')" >计费出场</button>
        </div>
        #}else{
            if(!isEmpty(timeOut)){
        #
        <div class="payInfo-list appear03">
            <div class="payInfo-box">
                <div class="pay-car"><img width="100%" height="100%" src="#:imgServerUrl+'/'+imgUrl#" class="imgcircle"/></div>
                <div class="pay-info">
                    <ul>
                        <li>
                            <p class="p1">车牌号</p>
                            <p>#:vehicleNo#</p>
                        </li>
                        <li>
                            <p class="p1">所属区域</p>
                            <p style="width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" title="#:parInName#">#:parInName#</p>
                        </li>
                        <li>
                            <p class="p1">入场通道</p>
                            <p style="width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" title="#:chnInName#">#:chnInName#</p>
                        </li>
                        <li>
                            <p class="p1">入场时间</p>
                            <p>#:inTime#</p>
                        </li>
                        <li>
                            <p class="p1">停留时间</p>
                            <p>#:stopTimeDay#</p>
                            <p>#:stopTime#</p>
                        </li>
                    </ul>
                </div>
            </div>
            <button class="payBtn btnBg01" onclick="centerPayment.openCenterChargePage('#:id#','#:isPay#')">补缴出场(超时:#:timeOut#,未出场)</button>
        </div>
        #}else{#
        <div class="payInfo-list appear02">
            <div class="payInfo-box">
                <div class="pay-car"><img width="100%" height="100%" src="#:imgServerUrl+'/'+imgUrl#" class="imgcircle" /></div>
                <div class="pay-info">
                    <ul>
                        <li>
                            <p class="p1">车牌号</p>
                            <p>#:vehicleNo#</p>
                        </li>
                        <li>
                            <p>所属区域</p>
                            <p style="width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" title="#:parInName#">#:parInName#</p>
                        </li>
                        <li>
                            <p>入场通道</p>
                            <p style="width:140px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;" title="#:chnInName#">#:chnInName#</p>
                        </li>
                        <li>
                            <p>入场时间</p>
                            <p>#:inTime#</p>
                        </li>
                        <li>
                            <p>停留时间</p>
                            <p>#:stopTimeDay#</p>
                            <p>#:stopTime#</p>
                        </li>
                    </ul>
                </div>
            </div>
            <button class="payBtn btnBg02">已缴费(未出场)</button>
        </div>
        # }
        }#
    </script>

</section>


<script src="js/ztree/jquery.ztree.all.min.js"></script>
<script src="js/lonix/lonix.float.js"></script>
<script src="views/parkLotCenter/managerCenter/js/centralPayment.js"></script>
<script>
    var centerPayment = new CenterPayment($("#center_payment"));
</script>